<template>
	<!--  -->
	<!-- 我的待付款点击待付款订单进去 -->
	<view class="page">
		<!-- 订单状态 -->
		<span v-if="state=='未支付'">
			<view class="order-status">
				<view class="status">
					<text class="iconfont icon-zhuyi"></text>
					<text>{{state}}</text>
				</view>
				<view class="reason">
					<text>剩余15分00秒</text>
				</view>
			</view>
		</span>
		<span v-if="state!='待收货' && state!='未支付'">
			<view style="height: 40px;" class="order-status">
				<view class="status">
					<!-- <text class="iconfont icon-zhuyi"></text> -->
					<text>{{state}}</text>
				</view>
				<view class="reason">
					<!-- <text>剩余15分00秒</text> -->
				</view>
			</view>
		</span>
		<span v-if="state=='待收货'">
			<view style="height: 40px;" class="order-status">
				<view class="status">
					<text>配送中</text>
				</view>
			</view>
			<view style="margin-top: 20px;height: 200px;" class="content">
				<map class="map" id="map" :include-points="markers" :scale="15" 
					:markers="markers" ></map>
			</view>
		</span>
		<!-- 收货地址 -->
		<view style="margin-top: 20px" class="shipping-address">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{infoTable.userName}}</text>
				<text>{{infoTable.userPhone}}</text>
			</view>
			<view class="address">
				<text>{{infoTable.address}}</text>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in orderTable" :key="index">
					<view class="thumb">
						<image :src="ip+item.goodsInfo" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.goodsName}}</text>
						</view>
						<view class="num-size">
							<text>数量:{{item.goodsNum}}</text>
						</view>
						<view class="price">
							<text>￥{{item.goodsPrice}}</text>
						</view>
						<view class="order-btn">
						</view>
					</view>
				</view>
			</view>
			<view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{orderTable[0].orderNo}}</text>
						<!-- <text class="btn">复制</text> -->
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{orderTable[0].orderTime}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">支付方式:</view>
					<view class="content">
						<text>支付宝支付</text>
					</view>
				</view>
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>专员配送</text>
					</view>
				</view>
				<view class="list">
					<view class="title">配送日期:</view>
					<view class="content">
						<text>{{orderTable[0].orderTime}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">备注信息:</view>
					<view class="content">
						<text>{{remarks}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price">
						<text>￥{{goddsMoney}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>配送费</text>
					</view>
					<view class="price">
						<text>+￥{{orderTable[0].deliveryFee}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price">
						<text>￥{{orderTable[0].money}}</text>
					</view>
				</view>
				<view v-if="state == '待付款'" class="list action">
					<view class="title">
						<button @click="toPay">去付款</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/baseUrl.js'
	import amap from "@/config/amap-wx.130.js";
	export default {
		data() {
			return {
				amapPlugin: null,
				markers: [],
				key: '0a1e26c6705378ca402b54fd90249684',//高德地图key
				poisdatas: [],
				orderTable: [],
				infoTable: [],
				state: 0,
				goddsMoney: 0,
				money: 0,
				deliveryFee: 0,
				remarks: '',
				startLong: '',
				startLati: '',
				endLong: '',
				endLati: '',
				polyline: [],
				ip:"http://43.142.173.112:9090/images/",
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			uni.request({
				url: baseUrl + "/userOrder/getOrderInfo	",
				method: 'POST',
				data: {
					orderNo: option.orderNo,
				},
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					console.log(res)
					this.orderTable = res.data.order;
					this.orderNo = res.data.order[0].orderNo;
					this.infoTable = res.data.info;
					this.state = this.orderTable[0].codeName;
					this.money = this.orderTable[0].money;
					this.deliveryFee = this.orderTable[0].deliveryFee;
					this.goddsMoney = this.money - this.deliveryFee;
					this.remarks = res.data.order[0].remarks;
					this.startLong = res.data.riderLng
					this.startLati = res.data.riderLat
					this.latitude = this.startLati;
					this.longitude = this.startLong;
					this.endLong = this.infoTable.userAddressLng
					this.endLati = this.infoTable.userAddressLat
					this.map()
				}
			})
			
		},
		methods: {
			map(){
				var that = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
				this.amapPlugin.getPoiAround({
					iconPathSelected: '', //如：..­/..­/img/marker_checked.png
					iconPath: '', //如：..­/..­/img/marker.png
					success: function(data) {
						//成功回调
						// that.showMarkerInfo(that.markers,0);
						var markers_new = [{
								id: 1, //marker 序号
								width: 30, //marker 宽度
								height: 30, //marker 高度
								iconPath: "../../static/address.png", //marker 图标路径
								latitude: that.endLati, //marker  纬度
								longitude: that.endLong, //marker 经度
								callout: {
									padding: 2, //callout 文本边缘留白
									fontSize: 15, //callout  文字大小
									bgColor: 'blue', //callout 背景颜色
									color: '#6B8E23', //callout 文字颜色
									borderRadius: 5, //边框圆角
									display: 'BYCLICK', //callout 'BYCLICK':点击显示; 'ALWAYS':常显
								}
							},{
								id: 2, //marker 序号
								width: 30, //marker 宽度
								height: 30, //marker 高度
								iconPath: "../../static/rider.png", //marker 图标路径
								latitude: that.startLati, //marker  纬度
								longitude: that.startLong, //marker 经度
							}];
						that.markers = markers_new;
					},
					fail: function(info) {
						//失败回调
						console.log("info", info)
					}
				})
			},
			toPay() {
				uni.navigateTo({
					url: '/pages/CashierDesk/CashierDesk?orderNo=' + this.orderNo + '&money=' + this.money
				});
			}
		},

	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
	.navigation {
		position: fixed;
		right: 10rpx;
		top: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.datpay {
		height: 300rpx;
	}

	.navigation {
		position: fixed;
		right: 10rpx;
		top: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.datpay {
		height: 300rpx;
	}
	.map{
		width:  375px;
		height: 200px;
		
	}
</style>
